<template>
  <el-dialog :visible.sync="visible" append-to-body>
    <div class="a">
      <div v-if="parentIdType === 2">
        <el-radio-group v-model="isExtends">
          <el-radio :label="true">
            按考核指标默认预警
          </el-radio>
          <el-radio :label="false">
            自定义预警条件
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 默认预警条件 -->
      <div v-if="isExtends && parentIdType === 2">
        <el-radio-group v-model="parentOption.conditionType" disabled>
          <template v-for="trigger in alarmConditTriggerMap">
            <el-radio :key="'trigger' +trigger.key" :label="trigger.key">
              {{ trigger.value }}
            </el-radio>
          </template>
        </el-radio-group>

        <template v-for="(conditionItem, conditionIndex) in parentOption.warningConditionParamList">
          <div :key=" 'conditionItem' +conditionIndex">
            <el-select v-model="conditionItem.checkType" disabled>
              <el-option
                v-for="checkTypeItem in alarmConditCheckTypeItemMap"
                :key="checkTypeItem.key"
                :label="checkTypeItem.value"
                :value="checkTypeItem.key"
              />
            </el-select>
            <el-select v-model="conditionItem.kpiId" disabled>
              <el-option
                v-for="kpiItem in kpiOptionList"
                :key="kpiItem.id"
                :label="kpiItem.name"
                :value="kpiItem.id"
              />
            </el-select>
            <el-select v-model="conditionItem.conditionType" disabled>
              <el-option
                v-for="conditionTypeItem in conditionTypeMap"
                :key="conditionTypeItem.key"
                :label="conditionTypeItem.value"
                :value="conditionTypeItem.key"
              />
            </el-select>
            <el-select v-model="conditionItem.operator" disabled>
              <el-option
                v-for="operatorItem in alarmConditOperatorMap"
                :key="operatorItem.key"
                :label="operatorItem.value"
                :value="operatorItem.key"
              />
            </el-select>
            <el-input v-model="conditionItem.value" class="value-input" disabled />
          </div>
        </template>
      </div>
      <div v-else>
        <el-radio-group v-model="conditionType">
          <template v-for="trigger in alarmConditTriggerMap">
            <el-radio :key="'trigger' +trigger.key" :label="trigger.key">
              {{ trigger.value }}
            </el-radio>
          </template>
        </el-radio-group>

        <template v-for="(conditionItem, conditionIndex) in warningConditionParamList">
          <div :key=" 'conditionItem' +conditionIndex">
            <el-select v-model="conditionItem.checkType" :disabled="checkTypeDisable(conditionIndex)">
              <el-option
                v-for="checkTypeItem in alarmConditCheckTypeItemMap"
                :key="checkTypeItem.key"
                :label="checkTypeItem.value"
                :value="checkTypeItem.key"
              />
            </el-select>
            <el-select v-model="conditionItem.kpiId">
              <el-option
                v-for="kpiItem in kpiOptionList"
                :key="kpiItem.id"
                :label="kpiItem.name"
                :value="kpiItem.id"
              />
            </el-select>
            <el-select v-model="conditionItem.conditionType">
              <el-option
                v-for="conditionTypeItem in conditionTypeMap"
                :key="conditionTypeItem.key"
                :label="conditionTypeItem.value"
                :value="conditionTypeItem.key"
              />
            </el-select>
            <el-select v-model="conditionItem.operator">
              <el-option
                v-for="operatorItem in alarmConditOperatorMap"
                :key="operatorItem.key"
                :label="operatorItem.value"
                :value="operatorItem.key"
              />
            </el-select>
            <el-input v-model="conditionItem.value" class="value-input" />
            <template v-if="warningConditionParamList.length === 0 || conditionIndex === 0">
              <span class="el-icon-circle-plus-outline" @click="handleAdd" />
            </template>
            <template v-else>
              <span class="el-icon-delete" @click="() => {handleDelete(conditionIndex)}" />
            </template>
          </div>
        </template>
      </div>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="handleClose">
        取消
      </el-button>
      <el-button size="mini" type="primary" @click="handleOk">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { alarmConditTriggerMap, alarmConditOperatorMap, alarmConditCheckTypeItemMap, conditionTypeMap } from '@/config/dict'
import { isValid } from '../../../../../utils'
export default {
  name: 'AlarmConditSelectAddView',
  data() {
    return {
      alarmConditTriggerMap,
      alarmConditOperatorMap,
      alarmConditCheckTypeItemMap,
      conditionTypeMap,
      conditionType: null,
      parentIdType: null,
      warningConditionParamList: [],
      visible: false,
      isExtends: true,
      parentOption: {}, // 父级默认预警条件(只在parentIdType 为 2 时,需要用到)
      childSelfKpiNames: '' // 下级指标的候选值名称串 (只在parentIdType 为 2 时,需要用到)
    }
  },
  computed: {
    // 指标 候选项 , 当编辑的是默认预警条件时, 候选值为 基础配置的候选值, 当编辑的是下级指标时, 则是下级指标带有的候选值
    kpiOptionList: function() {
      const { businessFormData } = this.$store.state
      const kpiOptionList = businessFormData.basicForm.data.businessKpiParams || []
      if (this.$data.parentIdType === 1) {
        return kpiOptionList
      }
      if (this.$data.parentIdType === 2) {
        return kpiOptionList.filter(e =>
          this.$data.childSelfKpiNames.split(',').includes(e.name)
        )
      }
      return businessFormData.basicForm.data.businessKpiParams || []
    }

  },
  methods: {
    open(option) {
      this.$data.visible = true
      this.$data.conditionType = option.conditionType
      this.$data.parentIdType = option.parentIdType
      this.$data.parentOption = option.parentOption || {}
      this.$data.childSelfKpiNames = option.kpiName
      const formatWarningConditionParamList = () => {
        if (option.warningConditionParamList && option.warningConditionParamList.length) {
          return option.warningConditionParamList
        } else {
          return [this.createEmpty()]
        }
      }
      this.$data.warningConditionParamList = formatWarningConditionParamList()
      this.setDefaultExtend()
      return new Promise((resolve, reject) => {
        this.promistEmit = { resolve, reject }
      })
    },

    // 创建空的考核条件
    createEmpty(option) {
      return {
        kpiId: null,
        operator: null,
        conditionType: null,
        value: null,
        checkType: null,
        parentIdType: this.$data.parentIdType
      }
    },

    // 判断是否设置继承
    setDefaultExtend() {
      // 当为编辑时 ,且 编辑的是下级指标 才默认为 自定义 , 否则按继承
      if (this.$data.parentIdType === 2 && this.$data.warningConditionParamList.filter(e => e.value).length > 0) {
        this.$data.isExtends = false
      } else {
        this.$data.isExtends = true
      }
    },

    // 根据已选指标 ,判断已选指标如果存在于默认指标库, 那么checkType将继承 默认指标的checkType, 且不可更改
    checkTypeDisable: function(index) {
      if (this.$data.parentIdType === 1) {
        return false
      }
      if (this.$data.parentIdType === 2) {
        const childSelect = this.$data.warningConditionParamList[index]
        const findParent = this.$data.parentOption.warningConditionParamList.find(e => e.kpiId === childSelect.kpiId)
        // 如果改下级指标存在于默认指标配置中, 则设置不可变更, 且设置改默认值 到 下级指标中
        if (findParent) {
          childSelect.checkType = findParent.checkType
          return true
        } else {
          return false
        }
      }
    },
    // 添加一条规则
    handleAdd() {
      this.$data.warningConditionParamList = [...this.$data.warningConditionParamList, this.createEmpty()]
    },

    // 移除一条规则
    handleDelete(index) {
      this.$data.warningConditionParamList = this.$data.warningConditionParamList.filter((e, i) => i !== index)
    },

    handleClose() {
      this.$data.visible = false
    },
    checkSubmitData(data) { // 检查提交数据
      if (!data.conditionType) {
        this.$message({ type: 'warning', message: '请选择触发类型' })
        return false
      }
      if (!data.warningConditionParamList || data.warningConditionParamList.length === 0) {
        this.$message({ type: 'warning', message: '请添加触发条件' })
        return false
      }
      let isComplate = true
      data.warningConditionParamList.forEach(e => {
        if (!isValid(e.checkType) || !isValid(e.kpiId) || !isValid(e.conditionType) || !isValid(e.operator) || !isValid(e.value)) {
          isComplate = false
        }
      })
      if (!isComplate) {
        this.$message({ type: 'warning', message: '请完善触发条件' })
        return false
      }
      return true
    },
    handleOk() { // 提交数据
      let warningConditionParamList = null
      let conditionType = null

      if (this.$data.parentIdType === 2 && this.$data.isExtends) {
        warningConditionParamList = this.$data.parentOption.warningConditionParamList
        conditionType = this.$data.parentOption.conditionType
      } else {
        warningConditionParamList = this.$data.warningConditionParamList
        conditionType = this.$data.conditionType
      }
      if (!this.checkSubmitData({ warningConditionParamList, conditionType })) {
        return
      }
      this.$data.visible = false
      this.promistEmit.resolve({
        warningConditionParamList, conditionType
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .value-input{
    width: 174px;
  }
</style>
